<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Title</title>
    <style>

        .img-bg{
            display: inline-block;
            background-image: url("./assets/numbers.png");
            background-repeat: no-repeat;
            background-position: -32px -32px;
            background-size: 484px;
            width: 60px;
            height: 82px;
        }
        .img-0{
            background-position: -32px -32px;
        }
        .img-1{
            background-position: -104px -32px;
        }
        .img-2{
            background-position: -176px -32px;
        }
        .img-3{
            background-position: -248px -32px;
        }
        .img-4{
            background-position: -320px -32px;
        }
        .img-5{
            background-position: -392px -32px;
        }
        .img-6{
            background-position: -32px -134px;
        }
        .img-7{
            background-position: -104px -134px;
        }
        .img-8{
            background-position: -176px -134px;
        }
        .img-9{
            background-position: -248px -134px;
        }
        .img-m{
            background-position: -322px -133px;
        }
        .img-pot{
            background-position: -392px -134px;
        }
    </style>
    <script>
        window.onload = function (){
            let divArr = document.querySelectorAll(".img-bg");
            // setInterval(function (){
            //     let day = new Date();
            //     let timeStr = day.toLocaleTimeString();
            //     for (let i = 0; i < divArr.length; i++) {
            //         let num = timeStr.charAt(i);
            //         if(num==":") continue;
            //         divArr[i].className = `img-bg img-${num}`;
            //     }
            // },1000)
            function setTime(){
                let day = new Date();
                let timeStr = day.toLocaleTimeString();
                for (let i = 0; i < divArr.length; i++) {
                    let num = timeStr.charAt(i);
                    if(num===":") continue;
                    divArr[i].className = `img-bg img-${num}`;
                }
            }
            setTime();
            setInterval(setTime,1000)
        }
    </script>
</head>
<body>
    <div class="clock">
        <div class="img-bg"></div>
        <div class="img-bg"></div>
        <div class="img-bg img-m"></div>
        <div class="img-bg"></div>
        <div class="img-bg"></div>
        <div class="img-bg img-m"></div>
        <div class="img-bg"></div>
        <div class="img-bg"></div>
    </div>
</body>
</html>